<template>
  <div class="roomManage">
    <div class="content-item">
      <Bread :breadData="breadData" />
      <el-button type="primary"
                 size="small"
                 style="float: right;margin-left: 20px;"
                 @click="addArea">+添加房间</el-button>
      <el-button type="primary"
                 size="small"
                 style="float: right"
                 @click="volumeSet">批量设置</el-button>
    </div>
    <div class="content-item">
      <TabList :tabData="tabData"
               class="table-header-gray"
               :specCol="sepecCol"
               :columns="columns"></TabList>
      <pagenation :dataLength="total"
                  :page="queryParams.page"
                  :pageSize="queryParams.size"
                  :handleSizeChange="handleSizeChange"
                  :handleCurrentChange="handleCurrentChange" />
    </div>

    <add-or-edit-dialog ref="formDialog"
                        :dialogForm="dialogForm"
                        :floorList="floorList"
                        @handleClose="handleClose"
                        :addOrEditSure="addOrEditSure"
                        :rules="rules"
                        :title="title"
                        :addOrEditShow="addOrEditShow"></add-or-edit-dialog>
    <volume-set-dialog ref="volumeSetDialog"
                       :dialogForm="dialogForm2"
                       :loading="loading"
                       :floorInfo="floorInfo"
                       :roomInfo="roomInfo"
                       :floorList="floorList"
                       :roomNumList="roomNumList"
                       @handleClose="handleClose"
                       :volumeSetSure="volumeSetSure"
                       :rules="rules"
                       :title="title"
                       :volumeSetShow="volumeSetShow"></volume-set-dialog>
  </div>
</template>
<script>
import Bread from '../../componetns/bread'
import AddOrEditDialog from './addOrEditHomeDialog'
import VolumeSetDialog from './volumeSetDialog'
import { pagination } from '@/tools/mixin'
import {
  listRoomByBuildingIdUsingPOST,
  listFloorByBuildingIdUsingGET,
  addOrUpdateRoomUsingPOST,
  removeRoomUsingDELETE,
  batchSettingRoomUsingPOST,
  enableRoomUsingGET
} from '@api/auto'
export default {
  components: {
    Bread,
    AddOrEditDialog,
    VolumeSetDialog
  },
  mixins: [pagination],
  data () {
    return {
      loading: false,
      total: 0,
      queryParams: {
        size: 10,
        page: 1
      },
      floorInfo: {},
      roomInfo: {},
      volumeSetShow: false,
      dialogForm: {
        name: '', floorId: null, bedNum: null, id: null
      },
      dialogForm2: { numberPrefix: null, numberDigits: null, totalRoomNum: 0, bedNum: null },
      floorList: [],
      floorRoom: [],
      roomNumList: [],
      title: '',
      addOrEditShow: false,
      rules: {
        name: [{ required: true, message: '请输入房间号', trigger: 'blur' },
          { pattern: /^[0-9]{1,6}$/, message: '请输入6位以内的正整数', trigger: 'blur' }],
        floorId: [{ required: true, message: '请选择所在楼层', trigger: 'blur' }],
        numberPrefix: [
          { pattern: /^[0-9]{0,6}$/, message: '请输入6位以内的正整数', trigger: 'blur' }],
        numberDigits: [{ required: true, message: '请输入编号位数', trigger: 'blur' },
          { pattern: /^[1-9]{1}$/, message: '请输入1位正整数', trigger: 'blur' }],
        totalRoomNum: [{ required: true, message: '请输入房间总数', trigger: 'blur' },
          { pattern: /^[0-9]{1,6}$/, message: '请输入6位以内的正整数', trigger: 'blur' }],
        bedNum: [{ required: true, message: '请输入每个房间的床位数', trigger: 'blur' },
          { pattern: /^[0-9]{1,2}$/, message: '请输入2位以内的正整数', trigger: 'blur' }]
      },
      breadData: [
        { name: '园区', path: '/main/apartmentManage/roomManage/index' },
        { name: JSON.parse(sessionStorage.floorInfo).name, path: '/main/apartmentManage/roomManage/floorManageindex' },
        { name: JSON.parse(sessionStorage.roomInfo).numberAndUnitNumber, path: '/main/apartmentManage/roomManage/homeManageindex' }],
      tabData: [],
      columns: [
        { label: '房间编号', prop: 'name' },
        { label: '楼层', prop: 'floorName' },
        { label: '床位数', prop: 'bedNum' },
        { label: '是否启用', prop: 'status' },
        { label: '操作', prop: 'func' }
      ],
      sepecCol: [
        { label: '是否启用', prop: 'sex', tem: `<switch-vue :isActive="Boolean(row.status)" @switchChange="that.$parent.switchChange(row)"></switch-vue >` },
        { label: '操作',
          prop: 'func',
          tem: `<div>
          <el-button type="text" @click="that.$parent.edit(row)">编辑</el-button>
        <el-button type="text" @click="that.$parent.deleteFun(row)">删除</el-button>
        </div>` }
      ]
    }
  },
  created () {
    this.query()
    listFloorByBuildingIdUsingGET(JSON.parse(sessionStorage.roomInfo).id).then(res => {
      this.floorList = res.data
      this.roomNumList = []
      res.data.forEach(ele => {
        this.roomNumList.push(0)
      })
    })
    this.floorInfo = JSON.parse(sessionStorage.floorInfo)
    this.roomInfo = JSON.parse(sessionStorage.roomInfo)
  },
  methods: {
    query (pageNum = 1) {
      this.queryParams.page = pageNum
      listRoomByBuildingIdUsingPOST({ id: JSON.parse(sessionStorage.roomInfo).id, ...this.queryParams }).then(res => {
        this.tabData = res.data.list
        this.total = res.data.total || 0
      })
    },
    addArea () {
      this.addOrEditShow = true
      this.title = '添加房间'
    },
    volumeSet () {
      this.volumeSetShow = true
    },
    switchChange (row) {
      enableRoomUsingGET(row.id, row.status === 0 ? 1 : 0, 1).then(res => {
        let index = this.tabData.findIndex(item => item.id === row.id)
        this.tabData[index].status = this.tabData[index].status === 0 ? 1 : 0
        this.$message.success('操作成功')
      })
    },
    edit (row) {
      console.log(row)
      this.addOrEditShow = true
      this.dialogForm.name = row.name
      this.dialogForm.floorId = row.floorId
      this.dialogForm.bedNum = row.bedNum
      this.dialogForm.id = row.id
      this.title = '编辑房间'
    },
    deleteFun (row) {
      this.$confirm('确定删除该房间？', '提示', {
        type: 'warning'
      }).then(_ => {
        removeRoomUsingDELETE(row.id).then(res => {
          this.$message.success('操作成功')
          this.query()
        })
      }).catch(() =>
        this.$message.info('已取消删除')
      )
    },
    handleClose () {
      this.roomNumList.forEach((item, index) => {
        this.roomNumList[index] = 0
      })
      console.log(this.roomNumList)
      this.addOrEditShow = false
      this.volumeSetShow = false
      this.loading = false
      this.dialogForm = {
        name: '', floorId: null, bedNum: null, id: null
      }
      this.dialogForm2 = {
        nanumberPrefix: null, numberDigits: null, totalRoomNum: 0, bedNum: null
      }
    },
    addOrEditSure () {
      this.$refs.formDialog.$refs.dialogForm.validate((valid) => {
        if (valid) {
          addOrUpdateRoomUsingPOST({ buildingId: this.roomInfo.id, ...this.dialogForm }).then(res => {
            this.query()
            this.handleClose()
            this.$message.success('操作成功')
          })
        }
      })
    },
    volumeSetSure () {
      this.$refs.volumeSetDialog.$refs.dialogForm.validate(valid => {
        if (valid) {
          this.loading = true
          let floorRoomList = []
          this.floorList.forEach((item, index) => {
            floorRoomList.push({
              floorId: item.id,
              floorName: item.name,
              roomNum: this.roomNumList[index]
            })
          })
          batchSettingRoomUsingPOST({ ...this.dialogForm2, buildingId: this.roomInfo.id, floorRoomList: floorRoomList }).then(res => {
            this.$message.success('操作成功')
            this.query()
            this.handleClose()
          }).catch(res => {
            this.loading = false
          })
        }
      })
    }
  }
}
</script>
